<template>
  <div>
    <!-- <div class="back" @click="listClick">企业列表></div> -->
    <el-card :body-style="{'padding-left': '0','padding-right': '0','padding-bottom': '0'}" class="elcard overview-info">
      <div class="logo-box">
        <img width="100%" height="100%" v-if="companyLogo==='none'" src="../../../assets/img/default.png">
        <img width="100%" height="auto" v-if="companyLogo.indexOf('base64')>-1" :src="companyLogo">
      </div>
      <div class="info">
        <h2>{{companyName}}</h2>
        <!-- 收藏 -->
        <el-tooltip
          class="item"
          effect="dark"
          :content="!isCollect ? '收藏' : '取消收藏'"
          placement="top"
        >
          <a
            class="collect-icon el-icon-star-off"
            :class="{ highlight: isCollect }"
            @click="collect()"
          ></a>
        </el-tooltip>
        <!-- <p class="all-score">综合科创指数：
          <span v-if="compositeScore!==''" :class="{'red-color': compositeScore<60}" style="letter-spacing:-1px;font-size:28px;color:#22dabe;">{{compositeScore}}</span>
          <span v-else class="el-icon-loading"></span>
        </p> -->
        <ul class="score-list">
          <li>
            <em>科技创新指数：</em>
            <p class="score-star clearfix" :title="scienceScores+'分'">
              <span v-for="(index) in 5" :key="index"
                :class="[{'color1': 80<=Math.ceil(scienceScores)||(60<=Math.ceil(scienceScores)&&index<=4)},
                  {'color2': 60>=Math.ceil(scienceScores)&&40<=Math.ceil(scienceScores)&&index<=3},
                  {'color3': (40>=Math.ceil(scienceScores)&&20<=Math.ceil(scienceScores)&&index<=2)||
                    (20>=Math.ceil(scienceScores)&&0<Math.ceil(scienceScores)&&index==1)
                    }]"></span>
            </p>
            <i>{{scienceScores}}</i>
            <i @click="showExplain" title="解释" class="explain"></i>
            <!-- <el-popover
              placement="right"
              width="300"
              trigger="hover">
              <p>采用文本情感分析算法，自动分析识别出篇章中表达的观点或态度情感倾向，如正面、中性、负面</p>
              <i slot="reference" class="explain"></i>
            </el-popover> -->
          </li>
          <!-- <li>
            <em>企业稳定指数：</em>
            <p class="score-star clearfix" :title="stabilityScore+'分'">
              <span v-for="(index) in 5" :key="index"
                :class="[{'color1': 80<=Math.ceil(stabilityScore)||(60<=Math.ceil(stabilityScore)&&index<=4)},
                  {'color2': 60>=Math.ceil(stabilityScore)&&40<=Math.ceil(stabilityScore)&&index<=3},
                  {'color3': (40>=Math.ceil(stabilityScore)&&20<=Math.ceil(stabilityScore)&&index<=2)||
                    (20>=Math.ceil(stabilityScore)&&0<Math.ceil(stabilityScore)&&index==1)
                    }]">
              </span>
            </p>
            <i>{{stabilityScore}}</i>
          </li>
          <li>
            <em>市场情绪指数：</em>
            <p class="score-star clearfix" :title="opinionScore+'分'">
              <span v-for="(index) in 5" :key="index"
                :class="[{'color1': 80<=Math.ceil(opinionScore)||(60<=Math.ceil(opinionScore)&&index<=4)},
                  {'color2': 60>=Math.ceil(opinionScore)&&40<=Math.ceil(opinionScore)&&index<=3},
                  {'color3': (40>=Math.ceil(opinionScore)&&20<=Math.ceil(opinionScore)&&index<=2)||
                    (20>=Math.ceil(opinionScore)&&0<Math.ceil(opinionScore)&&index==1)
                    }]"></span>
            </p>
            <i>{{opinionScore}}</i>
          </li>
          <li>
            <em>投资风险指数：</em>
            <p class="score-star clearfix" :title="riskScore+'分'">
              <span v-for="(index) in 5" :key="index"
                :class="[{'color3': 80<=Math.ceil(riskScore)||(60<=Math.ceil(riskScore)&&index<=4)},
                  {'color2': 60>=Math.ceil(riskScore)&&40<=Math.ceil(riskScore)&&index<=3},
                  {'color1': (40>=Math.ceil(riskScore)&&20<=Math.ceil(riskScore)&&index<=2)||
                    (20>=Math.ceil(riskScore)&&0<Math.ceil(riskScore)&&index==1)
                    }]"></span>
            </p>
            <i>{{riskScore}}</i>
          </li> -->
        </ul>
      </div>
      <div class="nav">
        <div :class="{active:active==0}">
          <p>企业信息</p>
          <div class="menu-box">
            <el-menu class="nav-menu"
            :default-active="onRoutes"
              active-text-color="#504da6"
              @select="handleSelect">
              <el-menu-item v-for="(item, index) in nav1" :key="index" :index="item.index">
                <span slot="title">{{item.name}}</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
        <div :class="{active:active==1}">
          <p>科创技术</p>
          <div class="menu-box">
            <el-menu class="nav-menu"
            :default-active="onRoutes"
              active-text-color="#504da6"
              @select="handleSelect">
              <template v-for="(item) in nav2">
                <template v-if="item.subs">
                  <el-submenu :index="item.index" :key="item.index">
                    <template slot="title">
                      <span slot="title">{{ item.name }}</span>
                    </template>
                    <el-menu-item v-for="subItem in item.subs" class="titlecolor" :index="subItem.index" :key="subItem.index">
                      {{ subItem.name }}
                    </el-menu-item>
                  </el-submenu>
                </template>
                <template v-else>
                  <el-menu-item :index="item.index" :key="item.index">
                    <span slot="title">{{ item.name }}</span>
                  </el-menu-item>
                </template>
              </template>
            </el-menu>
          </div>
        </div>
        <div :class="{active:active==2}">
          <p>风险分析</p>
          <div class="menu-box">
            <el-menu class="nav-menu"
              :default-active="onRoutes"
              active-text-color="#504da6"
              @select="handleSelect">
              <el-menu-item v-for="(item, index) in nav3" :key="index" :index="item.index">
                <span slot="title">{{item.name}}</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
        <div :class="{active:active==3}" @click="handleSelect('evalPublicSentiment')">企业舆情</div>
      </div>
    </el-card>
    <div>
      <router-view></router-view>
    </div>
    <Explain1 ref="explainBox"/>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import resize from '@/utils/resize'
import Colors from '@/utils/chartsColors'
import IndustryTable from './IndustryTable'
import Explain1 from './child/Explain1'
export default {
  mixins:[resize],
  inject: ['reload'],
  components: {
    IndustryTable,
    Explain1
  },
  data() {
    return {
      companyName: this.$route.query.name,
      companyLogo: 'src', // 图片logo
      eid: this.$route.query.eid,
      compositeScore: '', // 综合指数
      scienceScores: '', // 科技创新指数
      stabilityScore: '', // 企业稳定指数
      opinionScore: '', // 市场情绪指数
      riskScore: '', // 投资风险指数
      scoreArr: [false, false, false, false], // 4个分数计算完后，才计算综合指数
      nav1: [],
      nav2: [],
      nav3: [],
      navActive: -1,
      active:0,
      isCollect: false,
    }
  },
  /* beforeRouteEnter(to, from, next) {
   next(vm=>{          //  这里的vm指的就是vue实例，可以用来当做this使用
      if(from.name){
        vm.routerParameter = from.name
      }
    })
  }, */
  computed:{
    evalActive:{
      get: function() {
        return this.$store.state.evalActive;
      },
      set: function(newValue) {
        this.$store.commit("setEvalActive", newValue);
      }
    },
    routerParameter:{
      get: function() {
        return this.$store.state.routerParameter;
      },
      set: function(newValue) {
        this.$store.commit("setRouterParameter", newValue);
      }
    },
    onRoutes() {
      return this.$route.name
    },
    ...mapState(['levelCode','levelName'])
  },
  created(){

  },
  beforeRouteLeave(to,from,next){
    this.evalActive = 0
    next()
  },
  mounted() {
    this.active = this.evalActive
    this.init()
  },
  methods: {
    listClick(){
      this.$router.push({
        name:this.routerParameter
      }, onComplete => { }, onAbort => { })
    },
    handleSelect(val){
      if(val!='publicSentiment'&&val!=='evalPublicSentiment'){
        let that = this
        fn(this.nav1,0)
        fn(this.nav2,1)
        fn(this.nav3,2)
        function fn(data,n){
          for(let i=0;i<data.length;i++){
            // 判断第二层
            if(data[i].subs){
              for(let j =0 ;j<data[i].subs.length;j++){
                if(data[i].subs[j].index == val){
                  that.active = n
                  break;
                }
              }
              //判断第一层
            }else if(data[i].index == val){
              that.active = n
              break;
            }
          }
        }
      }else{
        this.active = 3
      }
      this.evalActive = this.active
      this.$router.push(
        {name:val,
        query:{eid:this.$route.query.eid,name:this.$route.query.name}}
        , onComplete => { }, onAbort => { }
      )
    },
    init() {
      this.nav1 = [{
        index: 'evalInformationOver',
        name: '信息概览',
      },{
        index: 'evalBusiness',
        name: '工商信息',
      },{
        index: 'evalStockRight',
        name: '股权信息',
      },{
        index: 'evalInvestmentDistribution',
        name: '投资分布',
      }]

      this.nav2 = [{
        index: 'evalTechnologyOver',
        name: '技术总览',
      },{
        index: 'evalTechnicalAnalysis',
        name: '技术分析',
      },{
        index: '2',
        name: '科创专利',
        subs: [{
          index: 'evalPartentList',
          name: '专利列表'
        },{
          index: 'evalAuth',
          name: '转让/授权/质押'
        },]
      }]

      this.nav3 = [{
        index: 'evalRiskInformation',
        name: '风险信息',
      },{
        index: 'evalRiskAnalysis',
        name: '风险分析',
      },]
      
      this.getCompanyLogo()
      // 计算分值
      this.getScienceScore()
      this.getStabilityScore()
      this.getInvestmentRiskScore()
      this.getOpinionScore()
      // 获取当前公司是否已收藏
      this.isCompanyCollect()
    },
    // 获取公司logo
    getCompanyLogo() {
      this.$get(this.$Url.search.companyLogo, {
        eid: this.eid,
      }).then(res => {
        let data = res.data
        if(data){
          this.companyLogo = data
        }else{
          this.companyLogo = 'none'
        }
      });
    },
    // 综合指数
    getCompositeScore() {
      this.$post(this.$Url.score.compositeScore, {
        name: this.companyName,
        sub_score: {'科技创新指数': this.scienceScores,
          '企业稳定指数': this.stabilityScore,
          '市场情绪指数': this.opinionScore,
          '投资风险指数': this.riskScore
        }
      }).then(data => {
        this.compositeScore = data.data || 0
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取科技创新指数
    getScienceScore() {
      this.$get(this.$Url.company.basicInfo, {
          companyName: this.companyName,
          dataType:'patentScore'
      }).then(data => {
        this.scienceScores = data.data.patentScore || 0
        this.$set(this.scoreArr, 0, true)
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取企业稳定指数
    getStabilityScore() {
      this.$post(this.$Url.score.stabilityScore, {
        eid: this.eid
      })
      .then(data => {
        if(data.data){
          this.stabilityScore = Math.floor(data.data.score)
          this.$set(this.scoreArr, 1, true)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取口碑影响指数
    getOpinionScore() {
      this.$get(this.$Url.score.opinionScore, {
        companyName: this.companyName
      })
      .then(data => {
        this.opinionScore = Math.floor(data.data)
        this.$set(this.scoreArr, 2, true)
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取投资风险指数
    getInvestmentRiskScore() {
      this.$post(this.$Url.score.riskScore, {
        name: this.companyName
      })
      .then(data => {
        if(data.data){
          this.riskScore = Math.floor(data.data.score)
          this.$set(this.scoreArr, 3, true)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取当前公司是否已收藏
    isCompanyCollect() {
      let name = this.$route.query.name
      this.$get(`${this.$Url.company.isCollect}?companyName=${name}`, {}).then(res => {
        let data = res.data
        if (data) {
          this.isCollect = data
        }
      }).catch(err => {})
    },
    // 收藏
    collect() {
      let name = this.$route.query.name
      let eid = this.$route.query.eid
      if (this.isCollect) {
        this.$delete(`${this.$Url.company.collectDelete}/${eid}`, {}).then(res => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: "取消收藏成功"
            })
            this.isCollect = false
          } else {
            this.$message({
              type: "error",
              message: "取消收藏失败",
              duration: 1000
            })
          }
        }).catch(err => {})
      } else {
        this.$post(this.$Url.company.collectAdd, {
          companyId: eid,
          companyName: name
        }).then(res => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: "收藏成功",
              duration: 1000
            })
            this.isCollect = true
          } else {
            this.$message({
              type: "error",
              message: "收藏失败",
              duration: 1000
            })
          }
        }).catch(err => {})
      }
    },
    showExplain() {
      this.$refs.explainBox.show()
    }
  },
  watch: {
    scoreArr() {
      for(let i=0;i<this.scoreArr.length;i++){
        if(this.scoreArr[i]===false){
          return
        }
      }
      this.getCompositeScore()
    },
    '$route.name'() {
      let val = this.$route.name
      if(val!='publicSentiment'&&val!=='evalPublicSentiment'){
        let that = this
        function fn(data,n){
          for(let i=0;i<data.length;i++){
            // 判断第二层
            if(data[i].subs){
              for(let j =0 ;j<data[i].subs.length;j++){
                if(data[i].subs[j].index == val){
                  that.active = n
                  break;
                }
              }
              //判断第一层
            }else if(data[i].index == val){
              that.active = n
              break;
            }
          }
        }
        fn(this.nav1,0)
        fn(this.nav2,1)
        fn(this.nav3,2)
      }else{
        this.active = 3
      }
      this.evalActive = this.active
    },
    '$route.query.name'() {
      this.reload()
    }
  }
}
</script>

<style lang="scss" scoped>
.back{
  text-align:left;
  cursor: pointer;
  padding-bottom:20px;
  padding-left:10px;
}
.card-box {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.elcard {
  position: relative;
  flex: .5;
  text-align: left !important;
  .tit {
    font-size: 14px;
    font-weight: bold;
    i {
      color: #504da6;
    }
  }
}
.overview-info {
  position: relative;
  margin-bottom: 20px;
  overflow: initial;
  .logo-box {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .info {
    // min-height: 140px;
    min-height: 90px;
    padding-left: 160px;
    h2 {
      width: 100%;
      margin-top: 20px;
      font-weight: bold;
      font-size: 24px;
      color: #4f515b;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .all-score {
      height: 34px;
      margin-top: 10px;
      font-size: 14px;
      color: #86899e;
      span {
        font-size: 24px;
        color: #504da6;
      }
    }
    .score-list {
      display: flex;
      align-items: center;
      margin-top: 10px;
      list-style: none;
      li {
        flex: 1;
        display: inline-flex;
        align-items: center;
        em {
          font-size: 14px;
          color: #86899e;
        }
        .score-star {
          margin-right: 10px;
        }
        i {
          font-style: normal;
          color: #86899e;
        }
        .explain {
          display: inline-block;
          width: 18px;
          height: 18px;
          margin-left: 8px;
          vertical-align: middle;
          background: url(../../../assets/img/wenhao.png) no-repeat center center;
          background-size: 100%;
          cursor: pointer;
        }
      }
    }
  }
  .nav {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    text-align: center;
    font-size: 14px;
    color: #4f515b;
    background-color: #f3f6f9;
    & > div {
      position: relative;
      flex: 1;
      height: 50px;
      line-height: 50px;
      cursor: pointer;
      &:hover {
        .menu-box {
          display: block;
        }
      }
      &.active {
        color: #fff;
        // background-color: rgba(80,77,165,0.9);
        background-color: #504da5;
      }
      .menu-box {
        position: absolute;
        top: 50px;
        z-index: 9;
        display: none;
        width: 100%;
        .nav-menu {
          position: relative;
          width: 100%;
          margin-top: 14px;
          font-size: 14px;
          font-weight: bold;
          &.active {
            display: block;
          }
          &:before {
            position: absolute;
            top: -9px;
            left: 50%;
            display: block;
            width: 0;
            height: 0;
            border-color: transparent;
            border-width: 10px;
            border-top-width: 0;
            border-bottom-color: #fff;
            border-style: solid;
            margin-left: -10px;
            content: " ";
          }
        }
      }
    }
  }
}
.score-star {
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
}
.score-star span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 3px;
  border-radius: 4px;
  background-color: #d1d6e3;
  &.color1, &.color2, &.color3 {
    &:nth-of-type(1) {
      background-color: #87CEEB;
    }
    &:nth-of-type(2) {
      background-color: #87CEFA;
    }
    &:nth-of-type(3) {
      background-color: #6495ED;
    }
    &:nth-of-type(4) {
      background-color: #4169E1;
    }
    &:nth-of-type(5) {
      background-color: #4169E1;
    }
  }
  
}
.score-star .color1 {
  // background-color: #4169E1;
  // background-color: #22dabe !important;
}
.score-star .color2 {
  // background-color: rgba(34,218,190,0.5) !important;
  // background-color: #fddf76 !important;
}
.score-star .color3 {
  // background-color: rgba(34,218,190,0.4) !important;
  // background-color: #fc3f4d !important;
}
.one-list-box {
  position: relative;
  left: 0;
  width: 100%;
  height: 30%;
  padding: 0 20px;
  overflow-y: auto;
}
.one-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  list-style: none;
  li {
    position: relative;
    width: 50%;
    padding-top: 6px;
    padding-bottom: 6px;
    // padding-right: 20px;
    box-sizing: border-box;
    cursor: pointer;
    &.active {
      p {
        font-weight: bold;
        color: #504da6;
      }
      i {
        color: #504da6;
      }
    }
    p {
      padding-right: 50px;
      font-size: 12px;
      color: #86899e;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      span {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 6px;
      }
    }
    i {
      position: absolute;
      top: 50%;
      right: 30px;
      line-height: 18px;
      margin-top: -9px;
      font-size: 12px;
      color: #86899e;
    }
  }
}
.btn-group {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  button {
    height: 30px;
    padding: 4px 16px;
    border: 0;
    border-radius: 4px;
    margin-right: 20px;
    font-size: 12px;
    color: #86899e;
    background-color: #f3f5f8;
    outline: none;
    &.active {
      color: #fff !important;
      background-color: #504da6 !important;
    }
  }
}
.contrast {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  text-align: center;
  font-size: 16px;
  color: #fff;
  background-color: #909399;
  cursor: pointer;
  &.active {
    background-color: orange;
  }
}
/* 企业专利概况 */
.info1, .info2, .info3 {
  position: relative;
  margin-left: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.info1 span, .info1 span, .info3 span {
  float: left;
  display: block;
  line-height: 24px;
  margin-right: 20px;
  font-size: 14px;
  color: #4f515b;
}
.info2 {
  font-weight: bold;
  font-size: 14px;
  color: #504da6;
}
.info1 span i, .info2 span i, .info3 span i {
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  color: #4f515b;
}
.info3 span i {
  font-weight: normal;
  color: #504da6;
}
.patent-column {
  text-align: center;
  font-size: 12px;
  color: #241c75;
}
/* 企业技术综合评分 */
.range {
  display: flex;
  width: 100%;
  list-style: none;
  align-items: center;
  justify-items: center;
  padding-left: 0;
}
.range li {
  flex: 1;
  line-height: 40px;
  margin-right: 2px;
  text-align: center;
  font-size: 12px;
  background-color: #f5f5fe;
}
.range li:hover {
  color: #fff;
  background-color: $mainColor;
  cursor: pointer;
}
.range li:nth-of-type(1) {
  margin-left: 6px;
}
.range-active {
  font-weight: 600;
  color: #fff;
  background-color: $mainColor !important;
  cursor: pointer;
}
.evaluation-list {
  height: 330px;
  margin-right: 20px;
  list-style: none;
  li {
    margin-bottom: 20px;
  }
}
.evaluation-list .title {
  position: relative;
  margin-bottom: 0;
}
.evaluation-list .title span {
  float: left;
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: #241c75;
}
.evaluation-list .title span:last-child {
  float: right;
}
.evaluation-list .vprogress {
  height: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.evaluation-list .footer-tip {
  font-size: 12px;
  color: #7674a3;
}
.name {
  font-weight: bold;
}
.collect-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  display: block;
  font-size: 16px;
  line-height: 36px;
  margin-left: 20px;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-align: center;
  background: #909399;
  cursor: pointer;
  &.highlight {
    background: orange;
  }
}
</style>